<template>
    <div class="total_item">
        <p>{{props.title}}</p>
        <div class="num_box">
            <div v-for="(item , index) in props.num" :key="index+item" :class="['num' , props.type==='small'?'small':'' ]" :style="{color:props.color}">{{item}}</div>
        </div>
    </div>
</template>

<script setup>
    const props=defineProps({
        title: {
            type: String,
            default: () => ''
        },
        num: {
            type: String,
            default: () => ''
        },
        type: {
            type: String,
            default: () => ''
        },
        color: {
            type: String,
            default: () => ''
        }
    })
</script>

<style scoped lang="less">
    .total_item{
        > p {
            font-size: .18rem;
            color: #fff;
            margin-bottom: .05rem;
        }
        .num_box{
            display: flex;
            height: .4rem;
            align-items: end;
            .num{
                width: .3rem;
                height: .38rem;
                line-height: .38rem;
                font-size: .36rem;
                background: linear-gradient( 180deg, #033A95 0%, rgba(11,53,128,0) 100%);
                border: 1px solid #03E1F0;
                text-align: center;
                &:not(:first-child){
                    margin-left: .05rem;
                }
                &.small{
                    width: .22rem;
                    height: .3rem;
                    line-height: .3rem;
                    font-size: .24rem;
                }

            }
        }
    }
</style>